.ph-tile--cheats {
background: conic-gradient(from 210deg, #ff2e88, #ffb800, #36f1cd, #7b5cff, #ff2e88);
position: relative; overflow: hidden; box-shadow: 0 0 14px rgba(255, 46, 136, 0.55);
}
.ph-tile--cheats::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 45%, transparent 60%);
transform: translateX(-120%); animation: chxShine 3.2s ease-in-out infinite;
}
.ph-cheats-glyph { position: relative; z-index: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45)); }
@keyframes chxShine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.chx-host { position: relative; padding: 0 !important; overflow-x: hidden; }
.chx {
--gold: #ffd666; --pink: #ff2e88; --cyan: #36f1cd; --ink: #0b0918; --card: rgba(255, 255, 255, 0.055);
min-height: 100%; padding: 0 12px 18px; color: #f4ecff;
background:
radial-gradient(120% 50% at 50% 0%, rgba(123, 92, 255, 0.35), transparent 70%),
radial-gradient(80% 40% at 100% 60%, rgba(255, 46, 136, 0.12), transparent 70%),
linear-gradient(180deg, #120d26, #0b0918 60%);
}
.chx-hero { position: relative; margin: 0 -12px 10px; padding: 18px 14px 14px; text-align: center; overflow: hidden; }
.chx-hero__glow {
position: absolute; inset: -40% -20% auto; height: 180%;
background: conic-gradient(from 0deg, rgba(255, 46, 136, 0.25), rgba(54, 241, 205, 0.18), rgba(255, 214, 102, 0.25), rgba(123, 92, 255, 0.25), rgba(255, 46, 136, 0.25));
filter: blur(26px); animation: chxSpin 9s linear infinite;
}
@keyframes chxSpin { to { transform: rotate(360deg); } }
.chx-hero__title { position: relative; font-family: var(--font-pixel, monospace); font-size: 1.55rem; letter-spacing: 4px; line-height: 1.1; }
.chx-hero__title span {
background: linear-gradient(90deg, #ffd666, #ff2e88, #36f1cd, #ffd666); background-size: 300% 100%;
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.6)); animation: chxGrad 4s linear infinite;
}
@keyframes chxGrad { to { background-position: 300% 0; } }
.chx-hero__sub { position: relative; margin-top: 8px; font-size: 0.86rem; line-height: 1.3; color: #d9cff5; }
.chx-badge { display: inline-block; margin-right: 4px; padding: 2px 7px; border-radius: 999px; font-style: normal; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.5px; }
.chx-badge--vip { color: #1b1200; background: linear-gradient(135deg, #ffe58a, #ffb800); box-shadow: 0 0 10px rgba(255, 184, 0, 0.6); }
.chx-badge--free { color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25); }
.chx-tabs {
position: sticky; top: 0; z-index: 3; display: flex; gap: 6px; margin: 0 -12px 12px; padding: 8px 12px;
overflow-x: auto; scrollbar-width: none; background: rgba(11, 9, 24, 0.82); backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.chx-tabs::-webkit-scrollbar { display: none; }
.chx-tab {
flex: 0 0 auto; display: flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 999px; cursor: pointer;
font: 600 0.82rem/1 inherit; color: #cfc4ee; background: var(--card); border: 1px solid rgba(255, 255, 255, 0.09);
transition: transform 0.15s, background 0.2s, color 0.2s;
}
.chx-tab span { font-size: 1rem; }
.chx-tab:active { transform: scale(0.95); }
.chx-tab.is-on { color: #1b1200; background: linear-gradient(135deg, #ffe58a, #ffb800); border-color: transparent; box-shadow: 0 4px 14px rgba(255, 184, 0, 0.35); }
.chx-lead { margin: 2px 2px 12px; font-size: 0.84rem; line-height: 1.35; color: #b9aedb; }
.chx-note { margin: 12px 2px 0; font-size: 0.76rem; line-height: 1.35; color: #8f84b3; text-align: center; }
.chx-pips { display: flex; gap: 4px; justify-content: center; margin: 6px 0 2px; }
.chx-pips i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.chx-pips i.on { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.chx-card {
position: relative; border-radius: 16px; background: var(--card); border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.25);
}
.chx-btn {
width: 100%; margin-top: 8px; padding: 8px 6px; border: 0; border-radius: 10px; cursor: pointer;
font: 700 0.82rem/1 inherit; color: #12081f; background: linear-gradient(135deg, var(--cyan), #6ff7ff);
box-shadow: 0 3px 0 #1a9d88, 0 6px 14px rgba(54, 241, 205, 0.25); transition: transform 0.1s, box-shadow 0.1s;
}
.chx-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #1a9d88; }
.chx-btn:disabled { cursor: default; color: #8f84b3; background: rgba(255, 255, 255, 0.08); box-shadow: none; }
.chx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.chx-potion { padding: 10px 9px 10px; text-align: center; overflow: hidden; }
.chx-potion b { display: block; margin-top: 4px; font-size: 0.88rem; }
.chx-potion small { display: block; min-height: 2.4em; margin-top: 2px; font-size: 0.72rem; line-height: 1.2; color: #a99fcc; }
.chx-potion.is-empty .chx-bottle { filter: grayscale(0.85) brightness(0.7); }
.chx-potion.is-drunk .chx-bottle { animation: chxGulp 0.6s ease; }
@keyframes chxGulp { 30% { transform: rotate(-28deg) translateY(-6px) scale(1.08); } 70% { transform: rotate(10deg); } }
.chx-bottle { --c: #36f1cd; position: relative; width: 64px; height: 84px; margin: 2px auto 0; animation: chxFloat 3s ease-in-out infinite; }
.chx-potion:nth-child(2n) .chx-bottle { animation-delay: -1.5s; }
@keyframes chxFloat { 50% { transform: translateY(-4px); } }
.chx-bottle__cork {
position: absolute; left: 50%; top: 0; width: 16px; height: 11px; transform: translateX(-50%); border-radius: 3px 3px 2px 2px;
background: linear-gradient(90deg, #6b4423, #b7834f 45%, #7a4f29); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}
.chx-bottle__neck {
position: absolute; left: 50%; top: 9px; width: 14px; height: 16px; transform: translateX(-50%); border-radius: 3px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.25));
border: 1px solid rgba(255, 255, 255, 0.35);
}
.chx-bottle__body {
position: absolute; left: 50%; bottom: 6px; width: 56px; height: 58px; transform: translateX(-50%); border-radius: 50% 50% 46% 46% / 46% 46% 54% 54%;
overflow: hidden; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 60%);
border: 1.5px solid rgba(255, 255, 255, 0.45); box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.35), 0 0 18px color-mix(in srgb, var(--c) 55%, transparent);
}
.chx-bottle__liquid {
position: absolute; left: -10%; right: -10%; bottom: 0; height: 64%;
background: linear-gradient(180deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c) 40%, color-mix(in srgb, var(--c) 60%, #000));
}
.chx-bottle__liquid::before {
content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 12px; border-radius: 50%;
background: color-mix(in srgb, var(--c) 65%, #fff); animation: chxWave 2.4s ease-in-out infinite;
}
@keyframes chxWave { 50% { transform: translateY(2px) scaleX(0.94) rotate(-3deg); } }
.chx-bottle__liquid i { position: absolute; bottom: -6px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.7); animation: chxBubble 2.6s linear infinite; }
.chx-bottle__liquid i:nth-child(1) { left: 30%; animation-delay: 0s; }
.chx-bottle__liquid i:nth-child(2) { left: 55%; width: 3px; height: 3px; animation-delay: 0.9s; }
.chx-bottle__liquid i:nth-child(3) { left: 70%; width: 4px; height: 4px; animation-delay: 1.7s; }
@keyframes chxBubble { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-34px); opacity: 0; } }
.chx-bottle__label {
position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); font-size: 1.35rem;
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}
.chx-bottle__shine {
position: absolute; left: 12%; top: 10%; width: 22%; height: 55%; border-radius: 50%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)); transform: rotate(14deg);
}
.chx-bottle__shadow { position: absolute; left: 50%; bottom: 0; width: 46px; height: 7px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, 0.55), transparent 70%); }
.chx-mirror { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding: 10px; border-radius: 16px; background: var(--card); border: 1px solid rgba(255, 255, 255, 0.08); }
.chx-mirror__frame {
position: relative; flex: 0 0 76px; height: 96px; border-radius: 40px 40px 12px 12px; overflow: hidden;
border: 3px solid #d9b25c; box-shadow: 0 0 0 2px #6b4f17, 0 0 18px rgba(255, 214, 102, 0.35);
}
.chx-mirror__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.chx-mirror__shine { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.35) 48%, transparent 60%); animation: chxShine 4s ease-in-out infinite; }
.chx-mirror__txt b { display: block; font-size: 0.95rem; color: var(--gold); }
.chx-mirror__txt small { display: block; margin-top: 3px; font-size: 0.76rem; line-height: 1.3; color: #b9aedb; }
.chx-mirror__txt .chx-pips { justify-content: flex-start; }
.chx-row { margin-bottom: 12px; }
.chx-row__head { margin: 0 2px 6px; font-size: 0.82rem; font-weight: 700; color: #e6dcff; }
.chx-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.chx-chip {
padding: 9px 4px; border-radius: 12px; cursor: pointer; font: 600 0.8rem/1.1 inherit; color: #d8cdf7;
background: var(--card); border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.12s, background 0.2s;
}
.chx-chip:active { transform: scale(0.95); }
.chx-chip.is-on { color: #08131a; background: linear-gradient(135deg, #9fe7ff, var(--cyan)); border-color: transparent; box-shadow: 0 0 12px rgba(54, 241, 205, 0.45); }
.chx-wallet { margin: 0 0 10px; padding: 10px; border-radius: 14px; text-align: center; font-size: 1.05rem; background: linear-gradient(135deg, rgba(80, 220, 120, 0.18), rgba(54, 241, 205, 0.1)); border: 1px solid rgba(80, 220, 120, 0.3); }
.chx-wallet b { font-size: 1.25rem; color: #8dffaa; }
.chx-list { display: flex; flex-direction: column; gap: 9px; }
.chx-money { display: flex; align-items: center; gap: 10px; padding: 10px; }
.chx-coin {
flex: 0 0 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font-size: 1.45rem;
background: radial-gradient(circle at 35% 30%, #fff6c4, #ffcf3f 45%, #c7881b); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 0 14px rgba(255, 207, 63, 0.5);
animation: chxCoin 3.4s ease-in-out infinite;
}
@keyframes chxCoin { 0%, 70%, 100% { transform: rotateY(0); } 85% { transform: rotateY(180deg); } }
.chx-money__txt { flex: 1; min-width: 0; }
.chx-money__txt b { display: block; font-size: 0.9rem; }
.chx-money__txt small { display: block; font-size: 0.74rem; color: #a99fcc; }
.chx-money__txt .chx-pips { justify-content: flex-start; }
.chx-money .chx-btn { width: auto; min-width: 64px; margin: 0; padding: 10px 8px; background: linear-gradient(135deg, #7dff9b, #36f1cd); }
.chx-chapter { margin: 14px 2px 8px; font-size: 0.9rem; font-weight: 700; color: #fff; }
.chx-chapter span { display: block; margin-bottom: 2px; font-family: var(--font-pixel, monospace); font-size: 0.55rem; letter-spacing: 1px; color: var(--pink); }
.chx-scene, .chx-day {
display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; text-align: left; cursor: pointer; font: inherit; color: inherit;
transition: transform 0.12s, border-color 0.2s;
}
.chx-scene:active, .chx-day:active { transform: scale(0.98); }
.chx-scene:hover, .chx-day:hover { border-color: rgba(255, 46, 136, 0.5); }
.chx-scene__thumb {
flex: 0 0 52px; height: 60px; border-radius: 12px; background: #2a2245 center top / cover no-repeat;
box-shadow: 0 0 0 2px rgba(255, 46, 136, 0.55), 0 4px 10px rgba(0, 0, 0, 0.4);
}
.chx-scene__txt { flex: 1; min-width: 0; }
.chx-scene__txt em { display: block; font-style: normal; font-size: 0.68rem; font-weight: 700; color: var(--gold); }
.chx-scene__txt b { display: block; font-size: 0.9rem; }
.chx-scene__txt small { display: block; font-size: 0.72rem; color: #a99fcc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chx-play {
flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-size: 0.85rem; color: #fff;
background: linear-gradient(135deg, var(--pink), #ff7a59); box-shadow: 0 0 12px rgba(255, 46, 136, 0.45);
}
.chx-days { display: flex; flex-direction: column; gap: 7px; }
.chx-day { background: var(--card); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; }
.chx-day__n {
flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: 11px;
font-family: var(--font-pixel, monospace); font-size: 0.8rem; color: #12081f; background: linear-gradient(135deg, #ffe58a, #ffb800);
}
.chx-day__t { flex: 1; min-width: 0; }
.chx-day__t b { display: block; font-size: 0.88rem; }
.chx-day__t small { display: block; font-size: 0.72rem; color: #a99fcc; }
.chx-day.is-here { border-color: rgba(54, 241, 205, 0.6); box-shadow: 0 0 14px rgba(54, 241, 205, 0.18); }
.chx-day.is-here small { color: var(--cyan); }
.chx-switch { display: flex; align-items: center; gap: 10px; padding: 11px 10px; }
.chx-switch__g { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font-size: 1.3rem; background: rgba(255, 255, 255, 0.07); }
.chx-switch__txt { flex: 1; min-width: 0; }
.chx-switch__txt b { display: block; font-size: 0.9rem; }
.chx-switch__txt small { display: block; font-size: 0.73rem; line-height: 1.25; color: #a99fcc; }
.chx-toggle { flex: 0 0 48px; height: 28px; position: relative; border: 0; border-radius: 999px; cursor: pointer; background: rgba(255, 255, 255, 0.15); transition: background 0.2s; }
.chx-toggle i { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); transition: transform 0.22s cubic-bezier(.4,1.6,.6,1); }
.chx-switch.is-on .chx-toggle { background: linear-gradient(135deg, var(--cyan), #6ff7ff); }
.chx-switch.is-on .chx-toggle i { transform: translateX(20px); }
.chx-switch.is-on .chx-switch__g { background: rgba(54, 241, 205, 0.18); }
.chx-vip { --gold: #ffd666; --pink: #ff2e88; --cyan: #36f1cd; --ink: #0b0918; position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(6, 4, 14, 0.72); backdrop-filter: blur(4px); animation: chxFade 0.2s ease both; }
.chx-vip.is-out { animation: chxFade 0.2s ease reverse both; }
@keyframes chxFade { from { opacity: 0; } }
.chx-vip__card {
width: 100%; max-width: 280px; padding: 18px 16px 14px; border-radius: 20px; text-align: center;
background: linear-gradient(180deg, #2a1b4f, #160f2e); border: 1px solid rgba(255, 214, 102, 0.45);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 184, 0, 0.2);
animation: chxPop 0.32s cubic-bezier(.3,1.5,.6,1) both;
}
@keyframes chxPop { from { transform: scale(0.85); opacity: 0; } }
.chx-vip__crown { font-size: 2.4rem; animation: chxFloat 2.4s ease-in-out infinite; }
.chx-vip__card b { display: block; margin: 6px 0 6px; font-size: 1.05rem; color: var(--gold); }
.chx-vip__card p { margin: 0 0 14px; font-size: 0.84rem; line-height: 1.4; color: #d9cff5; }
.chx-vip__go, .chx-vip__no { display: block; width: 100%; padding: 10px; border: 0; border-radius: 12px; cursor: pointer; font: 700 0.86rem/1 inherit; }
.chx-vip__go { color: #1b1200; background: linear-gradient(135deg, #ffe58a, #ffb800); box-shadow: 0 4px 0 #a46f00; }
.chx-vip__go:active { transform: translateY(2px); box-shadow: 0 2px 0 #a46f00; }
.chx-vip__no { margin-top: 8px; color: #b9aedb; background: transparent; }
.chx-toast {
position: absolute; left: 50%; bottom: 14px; z-index: 10; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 28px);
padding: 9px 14px; border-radius: 999px; transform: translateX(-50%); font-size: 0.84rem; white-space: nowrap;
background: rgba(20, 14, 40, 0.95); border: 1px solid rgba(54, 241, 205, 0.5); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
animation: chxToast 0.3s cubic-bezier(.3,1.5,.6,1) both;
}
.chx-toast b { overflow: hidden; text-overflow: ellipsis; }
.chx-toast span { font-size: 1.1rem; }
.chx-toast.is-bad { border-color: rgba(255, 46, 136, 0.6); white-space: normal; border-radius: 16px; }
.chx-toast.is-out { animation: chxToast 0.3s ease reverse both; }
@keyframes chxToast { from { transform: translate(-50%, 16px); opacity: 0; } }
.chx-spark {
position: absolute; z-index: 8; width: 6px; height: 6px; border-radius: 50%; pointer-events: none;
box-shadow: 0 0 8px currentColor; animation: chxSpark 0.75s ease-out forwards;
}
@keyframes chxSpark { to { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; } }